<h3 style="margin-top: 56px;">项目表格</h3>
<d-button (btnClick)="addData()">添加数据</d-button>
<d-data-table
  #dataTable
  [dataSource]="dataList"
  [tableOverflowType]="'overlay'"
  [scrollable]="true"
  [fixHeader]="true"
  tableHeight="15vh"
>
  <thead dTableHead>
    <tr dTableRow>
      <th dHeadCell>序号</th>
      <th dHeadCell>标识</th>
      <th dHeadCell>项目名</th>
      <th dHeadCell>执行端</th>
      <th dHeadCell>模拟器名称</th>
      <th dHeadCell>创建日期</th>
      <th dHeadCell>更新日期</th>
      <th dHeadCell>操作</th>
    </tr>
  </thead>
  <tbody dTableBody>
    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
      <tr dTableRow>
        <td dTableCell [rowItem]="rowItem" [field]="'index'">
          <span>{{ rowIndex + 1 }}</span>
        </td>
        <td dTableCell [rowItem]="rowItem" [field]="'id'">
          <span>{{ rowItem?.id }}</span>
        </td>
        <td
          dTableCell
          [editable]="true"
          [editableTip]="editableTip"
          [(editing)]="rowItem['nameEdit']"
          [rowItem]="rowItem"
          [field]="'name'"
          [beforeEditStart]="beforeEditStart"
          [beforeEditEnd]="beforeEditEnd"
        >
          <span *ngIf="!rowItem['nameEdit']">{{ rowItem?.name }}</span>
          <div *ngIf="rowItem['nameEdit']" class="edit-padding-fix">
            <!-- 引入dCommonsModule的autofocus -->
            <input
              [dAutoFocus]="true"
              class="devui-form-control"
              name="name"
              [(ngModel)]="rowItem.name"
              [attr.maxlength]="100"
              [attr.minlength]="3"
            />
          </div>
        </td>

        <td
          dTableCell
          [editable]="true"
          [editableTip]="editableTip"
          [(editing)]="rowItem['executionSideInfoEdit']"
          [rowItem]="rowItem"
          [field]="'executionSideInfo'"
          [beforeEditStart]="beforeEditStart"
          [beforeEditEnd]="beforeEditEnd"
        >
          <span
            *ngIf="!rowItem['executionSideInfoEdit']"
            >{{ rowItem?.executionSideInfo.ipPort }}</span
          >
          <div
            *ngIf="rowItem['executionSideInfoEdit']"
            class="customized-editor edit-padding-fix"
          >
            <d-select
              [options]="executionSideInfoList"
              [isSearch]="true"
              [autoFocus]="true"
              [filterKey]="'ipPort'"
              [toggleOnFocus]="true"
              [appendToBody]="true"
              [(ngModel)]="rowItem.executionSideInfo"
              (ngModelChange)="
                onSelectEditEnd(rowItem, 'executionSideInfoEdit')
              "
            >
              <ng-template let-option="option"  let-filterKey="filterKey">
                {{ option[filterKey] }}
              </ng-template>
            </d-select>
          </div>
        </td>

        <td
          dTableCell
          [editable]="true"
          [editableTip]="editableTip"
          [(editing)]="rowItem['simulatorInfoEdit']"
          [rowItem]="rowItem"
          [field]="'simulatorInfo'"
          [beforeEditStart]="beforeEditStart"
          [beforeEditEnd]="beforeEditEnd"
        >
          <span
            *ngIf="!rowItem['simulatorInfoEdit']"
            >{{ rowItem?.simulatorInfo.name }}</span
          >
          <div
            *ngIf="rowItem['simulatorInfoEdit']"
            class="customized-editor edit-padding-fix"
          >
            <d-select
              [options]="simulatorInfoList"
              [isSearch]="true"
              [autoFocus]="true"
              [filterKey]="'name'"
              [toggleOnFocus]="true"
              [appendToBody]="true"
              [(ngModel)]="rowItem.simulatorInfo"
              (ngModelChange)="onSelectEditEnd(rowItem, 'simulatorInfoEdit')"
            >
              <ng-template let-option="option" let-filterKey="filterKey">
                {{ option[filterKey] }}
              </ng-template>
            </d-select>
          </div>
        </td>

        <td dTableCell [rowItem]="rowItem" [field]="'createTime'">
          <span>{{ rowItem?.createTime | i18nDate : "full" : false }}</span>
        </td>
        <td dTableCell [rowItem]="rowItem" [field]="'updateTime'">
          <span>{{ rowItem?.updateTime | i18nDate : "full" : false }}</span>
        </td>
        <td dTableCell>
          <d-button bsStyle="text" (btnClick)="deleteData(rowItem?.id)"
            >删除</d-button
          >
        </td>
      </tr>
    </ng-template>
  </tbody>
</d-data-table>
